import React, { useState } from "react";

function SonA (props) {
  const msg = "函数组件的数据";
  return (
    <div>
      函数组件接收类组件数据：{ props.bMsg }
      <br />
      <button onClick={ () => { props.fun(msg) } }>SonA发送</button>
    </div>
  )
}

class SonB extends React.Component {
  render() {
    const msg = "类组件的数据";
    return (
      <div>
        类组件接收函数组件数据：{ this.props.aMsg }
        <br />
        <button onClick={ () => { this.props.fun(msg) } }>SonB发送</button>
      </div>
    )
  }
}

// 函数组件
// function App () {
//   const [aMsg, setAMsg] = useState('')
//   const [bMsg, setBMsg] = useState('')

//   function getAMsg (msg) {
//     setAMsg(msg)
//   }

//   function getBMsg (msg) {
//     setBMsg(msg)
//   }

//   return (
//     <>
//       <SonA bMsg={ bMsg } fun={ getAMsg }></SonA>
//       <SonB aMsg={ aMsg } fun={ getBMsg }></SonB>
//     </>
//   )
// }

// 类组件
class App extends React.Component {
  state = {
    aMsg: '',
    bMsg: ''
  }

  getAMsg = (msg) => {
    this.setState({
      aMsg: msg
    })
  }

  getBMsg = (msg) => {
    this.setState({
      bMsg: msg
    })
  }

  render() {
    return (
      <>
        <SonA bMsg={ this.state.bMsg } fun={ this.getAMsg }></SonA>
        <SonB aMsg={ this.state.aMsg } fun={ this.getBMsg }></SonB>
      </>
    )
  }
}

export default App;
